<template>
      <!-- 两张卡片 -->
    <div class="card-container"> <!-- 移除多余的闭合div -->  
  <div class="card3">  
    <img src="../../assets/40.jpg" class="card-img-top" alt="..." />  
    <div class="card-body">  
      <p class="card-text">  
        所有的成功，都来自不倦地努力和奔跑，所有的幸福都来自平凡的奋斗和坚持  
      </p>  
    </div>  
  </div>  
  <div class="card3">  
    <img src="../../assets/48.jpg" class="card-img-top" alt="..." />  
    <div class="card-body">  
      <p class="card-text">  
        在改变自己心态的瞬间，人生就出现了转机，此前的恶性循环会被切断，良性循环就开始了。  
      </p>  
    </div>  
  </div>  
</div> 

</template>

<script scoped>
export default {};
</script>

<style>
/* 并排卡片 */
.card-container {
  display: flex; /* 使用Flexbox */
  justify-content: space-between; /* 如果想要卡片之间有间距，可以使用这个值 */
  align-items: flex-start; /* 垂直方向顶部对齐 */
  margin: 0 auto; /* 使得容器在页面中水平居中 */
  max-width: 660px; /* 假设两个卡片加起来最大宽度为660px（300px * 2 + 2 * 30px margin）*/
}

.card3 {
  flex: 0 0 calc(50% - 60px); /* 每个卡片占据50%减去两边边距的空间 */
  margin: 30px; /* 为卡片添加外边距 */

  width: 300px; /* 卡片的基础宽度，但flex属性会覆盖这个值 */
  height: 20rem;
  border: 10px solid rgb(170, 170, 234);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  border-radius: 10px; /* 使用固定的像素值来确保圆角效果一致 */
  overflow: hidden; /* 确保图片不会溢出容器 */
}

/* 如果想要卡片居中显示并且没有间距，可以修改justify-content */
.card-container {
  justify-content: center; /* 让子元素在容器中居中，并且没有间距 */
}
</style>